<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06坐标轴</title>
    <script src="./node_modules/d3/dist/d3.min.js"></script>
    <style>
        .axis path,
        .axis line {
            fill: none;
            stroke: red;
            shape-rendering: crispEdges;
        }

        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
    </style>
</head>
<body>
</body>
</html>
<script>
    const dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
    const linear = d3.scaleLinear()
        .domain([0, d3.max(dataset)])
        .range([0, 250])
    const axis = d3.axisBottom(linear)
        // .scale(linear) // 设置坐标轴的比例尺
        .ticks(dataset.length) // 指定刻度的数量
    const body = d3.select('body')
    body.append('svg')
    const svg = body.select('svg')
    svg.append('g')
        .attr('class', 'axis')
        .attr("transform", "translate(20,130)")
        .call(axis)
    svg.append('rect')
        .attr('transform', 'translate(20,100)')
        .attr('height', 20)
        .attr('width', linear(2.5))

</script>
